import React, { useState, useEffect } from 'react';
import { Navbar as BootstrapNavbar, Nav } from 'react-bootstrap';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import AuthService from '../services/AuthService';

const Navbar = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [isAdmin, setIsAdmin] = useState(false);
    const [username, setUsername] = useState('');
    const navigate = useNavigate();
    const location = useLocation();

    const checkLoginStatus = () => {
        const user = AuthService.getCurrentUser();
        const loggedIn = AuthService.isAuthenticated();
        setIsLoggedIn(loggedIn);
        if (loggedIn) {
            setUsername(user?.user?.username || user?.username || '');
            setIsAdmin(AuthService.isAdmin());
        } else {
            setUsername('');
            setIsAdmin(false);
        }
    };

    useEffect(() => {
        checkLoginStatus();
        window.addEventListener('storage', checkLoginStatus);
        window.addEventListener('login-state-change', checkLoginStatus);
        return () => {
            window.removeEventListener('storage', checkLoginStatus);
            window.removeEventListener('login-state-change', checkLoginStatus);
        };
    }, [location.pathname]);

    const handleLogout = () => {
        AuthService.logout();
        setIsLoggedIn(false);
        setIsAdmin(false);
        setUsername('');
        navigate('/login');
        window.dispatchEvent(new Event('login-state-change'));
    };

    return (
        <div className="d-flex flex-column" style={{
            position: 'fixed',
            top: 0,
            left: 0,
            height: '100vh',
            width: '250px',
            backgroundColor: 'rgba(25, 135, 84, 0.1)',
            zIndex: 1000
        }}>
            {/* 顶部Logo区域 - 固定位置 */}
            <div
                className="w-100 text-center py-4 border-bottom"
                style={{
                    position: 'sticky',
                    top: 0,
                    zIndex: 1010,
                    backgroundColor: 'rgba(25, 135, 84, 0.1)'
                }}
            >
                <BootstrapNavbar.Brand
                    as={Link}
                    to={isLoggedIn ? (isAdmin ? '/admin' : '/todos') : '/login'}
                    className="d-block w-100"
                >
                    <div className="text-3xl font-bold text-gray-800 mx-auto tracking-wide" style={{ fontSize: '2rem' }} >
                        ToDo what
                    </div>
                    <div className="text-xs text-gray-500 mt-1 tracking-wider">
                        高效管理每一天
                    </div>
                </BootstrapNavbar.Brand>
            </div>

            {/* 导航内容区域 - 在剩余空间中垂直居中 */}
            <div
                className="flex-grow-1 d-flex align-items-center justify-content-center"
                style={{
                    overflowY: 'auto',
                    paddingBottom: '20px',
                    maxHeight: 'calc(100vh - 80px)' // 减去顶部高度
                }}
            >
                <div className="w-100">
                    <Nav className="flex-column w-100">

                        {/* 角色相关链接 */}
                        {isLoggedIn && !isAdmin && (
                            <>
                                <Nav.Link
                                    as={Link}
                                    to="/"
                                    className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                                    style={{ fontSize: '1.4rem' }} // 增大字体
                                >
                                    <i className="fa fa-home w-5 text-center mr-3" />
                                    <span>首页</span>
                                </Nav.Link>
                                <div className="w-100 border-top border-gray-200" />
                                <Nav.Link
                                    as={Link}
                                    to="/incomplete-todos"
                                    className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                                    style={{ fontSize: '1.4rem' }} // 增大字体
                                >
                                    <i className="fa fa-list w-5 text-center mr-3" />
                                    <span>我的待办</span>
                                </Nav.Link>
                                <div className="w-100 border-top border-gray-200" />
                            </>
                        )}

                        {isAdmin && (
                            <>
                                <Nav.Link
                                    as={Link}
                                    to="/admin"
                                    className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                                    style={{ fontSize: '1.4rem' }} // 增大字体
                                >
                                    <i className="fa fa-cog w-5 text-center mr-3" />
                                    <span>管理面板</span>
                                </Nav.Link>
                                <div className="w-100 border-top border-gray-200" />
                            </>
                        )}

                        {/* 登录/注册链接 - 只在未登录时显示在内容区域 */}
                        {!isLoggedIn && (
                            <>
                                <Nav.Link
                                    as={Link}
                                    to="/login"
                                    className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                                    style={{ fontSize: '1.4rem' }} // 增大字体
                                >
                                    <i className="fa fa-sign-in w-5 text-center mr-3" />
                                    <span>登录</span>
                                </Nav.Link>
                                <div className="w-100 border-top border-gray-200" />
                                <Nav.Link
                                    as={Link}
                                    to="/register"
                                    className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                                    style={{ fontSize: '1.4rem' }} // 增大字体
                                >
                                    <i className="fa fa-user-plus w-5 text-center mr-3" />
                                    <span>注册</span>
                                </Nav.Link>
                            </>
                        )}
                    </Nav>
                </div>
            </div>

            {/* 用户信息/退出登录区域 - 固定在底部 */}
            {isLoggedIn && (
                <div
                    className="w-100 mt-auto border-top border-gray-200"
                    style={{
                        position: 'sticky',
                        bottom: 0,
                        backgroundColor: 'rgba(25, 135, 84, 0.1)',
                        zIndex: 1010
                    }}
                >
                    <div className="w-100 px-4 py-3 text-gray-600 flex items-center justify-content-center text-center"
                         style={{ fontSize: '1.3rem' }} // 增大字体
                    >
                        <i className="fa fa-user w-5 text-center mr-3" />
                        <span>欢迎，{username}</span>
                    </div>
                    <Nav.Link
                        onClick={handleLogout}
                        className="w-100 px-4 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-content-center text-center"
                        style={{ fontSize: '1.1rem' }} // 增大字体
                    >
                        <i className="fa fa-sign-out w-5 text-center mr-3" />
                        <span>退出登录</span>
                    </Nav.Link>
                </div>
            )}
        </div>
    );
};

export default Navbar;